<template>
  <div class="m--18px bg-[var(--app-content-bg-color)]">
    <el-row :gutter="16">
      <el-col :span="24" class="mb-18px">
        <el-card>
          <el-form ref="formRef" :model="baseForm" :rules="rules" class="w-400px ml-40px">
            <el-form-item label="基本修复费用" prop="first">
              <el-input v-model="baseForm.first" placeholder="请输入基本修复费用" />
            </el-form-item>
            <el-form-item label="补偿性修复费用" prop="second">
              <el-input v-model="baseForm.second" placeholder="请输入补偿性修复费用" />
            </el-form-item>
            <el-form-item label="水资源税税额" prop="third">
              <el-input v-model="baseForm.third" placeholder="请输入水资源税税额" />
            </el-form-item>
            <el-form-item label="抽出处理" prop="isTrue">
              <el-radio-group v-model="isTrue" size="large">
                <el-radio-button label="是" :value="1" />
                <el-radio-button label="否" :value="0" />
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb-18px">
        <el-card>
          <div class="title">
            <span>修复至标准期间损失</span>
          </div>
          <div class="ml-40px mr-40px">
            <Quantization ref="step1" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="mb-18px">
        <el-card>
          <div class="title">
            <span>达标后修复至基线期间损失</span>
          </div>
          <div class="ml-40px mr-40px">
            <Quantization ref="step2" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb-18px">
        <el-card>
          <div class="title">
            <span>损害到恢复至标准时的期间损失</span>
          </div>
          <div class="ml-40px mr-40px">
            <Quantization ref="step3" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb-18px">
        <el-card>
          <div class="title">
            <span>达标至恢复至基线时的期间损失</span>
          </div>
          <div class="ml-40px mr-40px">
            <Quantization ref="step4" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="mb-18px">
        <el-card>
          <div class="title">
            <span>超基线不超标范围地下水损害价值量化</span>
          </div>
          <div class="ml-40px mr-40px">
            <Quantization ref="step5" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div :span="24" class="text-center mt-16px">
      <el-button @click="cancel">上一步</el-button>
      <el-button type="primary" @click="next">量化</el-button>
    </div>

    <el-dialog v-model="dialogTableVisible" title="损害价值量化" width="1400px">
      <el-table :data="gridData" :span-method="arraySpanMethod">
        <el-table-column prop="name" label="" align="center" />
        <el-table-column label="超过修复目标值需要修复的地下水损害价值量化" align="center">
          <el-table-column label="基本恢复费用" align="center">
            <el-table-column prop="step1" label="修复至标准" align="center" />
            <el-table-column prop="step2" label="达标后修复至基线" align="center" />
          </el-table-column>
          <el-table-column label="补偿性恢复费用" align="center">
            <el-table-column prop="step3" label="损害到恢复至标准时的期间损失" align="center" />
            <el-table-column
              prop="step4"
              label="补偿性达标至恢复至基线时的期间损失恢复费用"
              align="center"
            />
          </el-table-column>
        </el-table-column>
        <el-table-column prop="step5" label="超基线不超标范围地下水损害价值量化" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Quantization from './quantization.vue'
defineOptions({ name: 'Step6Form' })

const emits = defineEmits<{
  (e: 'cancel'): void
}>()

const cancel = () => {
  emits('cancel')
}

const baseForm = ref({
  first: '',
  second: '',
  third: ''
})

const rules = reactive({
  first: [
    { required: true, message: '请输入基本修复费用', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '格式不正确' }
  ],
  second: [
    { required: true, message: '请输入补偿性修复费用', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '格式不正确' }
  ],
  third: [
    { required: true, message: '请输入水资源税税额', trigger: 'blur' },
    { pattern: /^\d+(\.\d+)?$/, message: '格式不正确' }
  ]
})

const dialogTableVisible = ref(false)
const gridData = ref<any>([])
const formRef = ref()
const step1 = ref()
const step2 = ref()
const step3 = ref()
const step4 = ref()
const step5 = ref()
const isTrue = ref(0)

const next = async () => {
  await formRef.value.validate()
  // 刷新页面
  // window.location.reload()
  const res1 = await step1.value.submitForm()
  const res2 = await step2.value.submitForm()
  const res3 = await step3.value.submitForm()
  const res4 = await step4.value.submitForm()
  const res5 = await step5.value.submitForm()

  const step1Value = res1.H * Number(baseForm.value.first)
  const step2Value = res2.H * Number(baseForm.value.first)
  const step3Value = res3.H * Number(baseForm.value.second)
  const step4Value = res4.H * Number(baseForm.value.second)
  const step5Value = res5.H * Number(baseForm.value.third)

  gridData.value = [
    {
      name: '损害价值量（万元）',
      step1: step1Value,
      step2: step2Value,
      step3: step3Value,
      step4: step4Value,
      step5: step5Value
    },
    {
      name: '合计',
      step1: step1Value + step2Value + step3Value + step4Value + step5Value
    }
  ]

  dialogTableVisible.value = true
}

const arraySpanMethod = ({ rowIndex, columnIndex }) => {
  if (rowIndex === 1) {
    if (columnIndex === 0) {
      return [1, 1]
    } else if (columnIndex === 1) {
      return [1, 5]
    } else {
      return [0, 0]
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题样式
.title {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.5px;
  color: var(--el-font-color-primary);

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #50bfff;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    content: '';
  }
}
</style>
